<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="header-decoration">
				<view class="decoration-circle circle-1"></view>
				<view class="decoration-circle circle-2"></view>
				<view class="decoration-circle circle-3"></view>
			</view>
			<view class="header-content">
				<view class="title-container">
					<view class="route-icon">✈️</view>
					<view class="title-icon"></view>
					<text class="main-title">{{guideData.title}}</text>
				</view>
				<view class="route-container">
					
				</view>
			</view>
			<view class="header-wave">
				<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
					<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="#ffffff"></path>
					<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="#ffffff"></path>
					<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="#ffffff"></path>
				</svg>
			</view>
		</view>
		
		<!-- 地图区域 -->
		<view class="map-section" :style="{height: mapHeight + 'px'}">
			<map 
				id="map" 
				class="map" 
				:longitude="mapCenter.longitude" 
				:latitude="mapCenter.latitude" 
				:scale="mapScale"
				:markers="currentMarkers"
				:polyline="currentPolyline"
				show-location="true"
				@markertap="onMarkerTap"
			></map>
		</view>
		
		<!-- 拖拽分隔条 -->
		<view class="drag-handle" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="drag-indicator"></view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content-section" :style="{height: contentHeight + 'px'}" scroll-y="true" enable-back-to-top="true">
			<!-- 天气Swiper -->
			<view class="weather-section">
				<view class="section-title">🌤️ 三日天气预报</view>
				<swiper class="weather-swiper" 
					:indicator-dots="true" 
					indicator-color="rgba(255,255,255,0.5)" 
					indicator-active-color="#1E90FF" 
					:circular="true"
					:autoplay="true"
					:interval="3000"
					:duration="500"
				>
					<swiper-item v-for="(weather, index) in guideData.weather.summary" :key="index">
						<view class="weather-card">
							<view class="weather-header">
								<view class="weather-date">{{formatDate(weather.day)}}</view>
								<view class="weather-icon">{{getWeatherIcon(weather.weather)}}</view>
							</view>
							<view class="weather-info">{{weather.weather}}</view>
							<view class="weather-temp">{{weather.temperature}}</view>
							<view class="weather-wind">{{weather.wind}}</view>
							<view class="weather-tips">💡 {{weather.tips}}</view>
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 天气提示 -->
				<view class="weather-tips-section">
					<view class="weather-tip-card">
						<view class="weather-tip-header">
							<view class="weather-tip-icon">
								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M19 14C20.49 12.54 22 10.79 22 8.5C22 5.42 19.58 3 16.5 3C14.24 3 13.39 3.93 12 5.23C10.61 3.93 9.76 3 7.5 3C4.42 3 2 5.42 2 8.5C2 10.79 3.51 12.54 5 14L12 21L19 14Z" stroke="#40E0D0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									<path d="M12 5.5L8 9.5L10 11.5L12 9.5L14 11.5L16 9.5L12 5.5Z" fill="#40E0D0"/>
								</svg>
							</view>
							<text class="weather-tip-title">天气提示</text>
						</view>
						<view class="weather-tip-content">前两日有强降雨，建议携带防水背包和防滑鞋</view>
					</view>
				</view>
			</view>
			

			<!-- 主导航标签页 -->
			<view class="main-tab-section">
				<view class="main-tab-header">
					<view 
						:class="['main-tab-item', {active: mainActiveTab === 'checkin'}]"
						@tap="switchMainTab('checkin')"
					>
						<text class="main-tab-text">打卡</text>
					</view>
					<view 
						:class="['main-tab-item', {active: mainActiveTab === 'plan'}]"
						@tap="switchMainTab('plan')"
					>
						<text class="main-tab-text">规划</text>
					</view>
					<view 
						:class="['main-tab-item', {active: mainActiveTab === 'budget'}]"
						@tap="switchMainTab('budget')"
					>
						<text class="main-tab-text">账单</text>
					</view>
				</view>
				
				<!-- 打卡内容 -->
				<view v-if="mainActiveTab === 'checkin'" class="checkin-section">
					<view class="checkin-container">
						<!-- 海南必吃美食 -->
						<view class="dining-section">
							<view class="section-title">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M6 13.5V21M18 21V13.5M6 2V4.5M18 2V4.5M10.5 2V6.5C10.5 7.88071 9.38071 9 8 9C6.61929 9 5.5 7.88071 5.5 6.5V2M18.5 2V6.5C18.5 7.88071 17.3807 9 16 9C14.6193 9 13.5 7.88071 13.5 6.5V2M21.5 16H2.5C2.5 12.5 5.5 9.5 9 9.5H15C18.5 9.5 21.5 12.5 21.5 16Z" stroke="#1E90FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
								{{guideData.dining.specialties.title}}
							</view>
							<view class="food-grid">
								<view class="food-item" v-for="(food, index) in guideData.dining.specialties.items" :key="index">
									<view class="food-icon">
										<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M7 10H17M7 14H17M11 18H13M6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#FF8C00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</view>
									<text class="food-name">{{food}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 规划内容 -->
				<view v-if="mainActiveTab === 'plan'" class="plan-section">
					<view class="tab-section">
						<view class="tab-header">
							<view 
								:class="['tab-item', {active: activeTab === -1}]"
								@tap="switchTab(-1)"
							>
								<text class="tab-text">总览</text>
							</view>
							<view 
								v-for="(day, index) in guideData.timeline" 
								:key="index" 
								:class="['tab-item', {active: activeTab === index}]"
								@tap="switchTab(index)"
							>
								<text class="tab-text">{{day.period}}</text>
							</view>
						</view>
				
				<!-- Tab内容 -->
				<view class="tab-content">
					<!-- 总览内容 -->
					<view v-if="activeTab === -1" class="overview-container">
						<view class="route-overview-card">
							<view class="ocean-wave">
								<view class="wave wave1"></view>
								<view class="wave wave2"></view>
							</view>
							<view class="route-path">{{guideData.routeOverview}}</view>
							<view class="route-days">
								<view class="route-day">
									<view class="day-title">Day 1</view>
									<view class="day-spots">
										<text>抵达海口</text>
										<view class="arrow-container">
											<view class="wave-arrow"></view>
										</view>
										<text>骑楼老街</text>
										<view class="arrow-container">
											<view class="wave-arrow"></view>
										</view>
										<text>海南鸡饭</text>
									</view>
								</view>
								<view class="route-day">
									<view class="day-title">Day 2</view>
									<view class="day-spots">
										<text>热带野生动植物园</text>
										<view class="arrow-container">
											<view class="wave-arrow"></view>
										</view>
										<text>和乐蟹午餐</text>
										<view class="arrow-container">
											<view class="wave-arrow"></view>
										</view>
										<text>亚龙湾海滩</text>
									</view>
								</view>
								<view class="route-day">
									<view class="day-title">Day 3</view>
									<view class="day-spots">
										<text>蜈支洲岛</text>
										<view class="arrow-container">
											<view class="wave-arrow"></view>
										</view>
										<text>免税城购物</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="timeline-container">
						<!-- 事件流 -->
						<view class="event-flow">
							<view 
								v-for="(event, eventIndex) in guideData.timeline[activeTab].events" 
								:key="eventIndex" 
								class="event-item"
								@tap="focusOnLocation(event.location)"
							>
								<view class="event-timeline">
									<view class="timeline-dot">
										<view class="timeline-dot-inner"></view>
									</view>
									<view class="timeline-line" v-if="eventIndex < guideData.timeline[activeTab].events.length - 1"></view>
								</view>
								<view class="event-content">
									<view class="event-time">
										<view class="time-icon">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<circle cx="12" cy="12" r="9" stroke="#40E0D0" stroke-width="2"/>
												<path d="M12 7V12L15 15" stroke="#40E0D0" stroke-width="2" stroke-linecap="round"/>
											</svg>
										</view>
										{{event.time}}
									</view>
									<view class="event-card">
										<view class="event-title">{{event.title}}</view>
										<view class="event-address">
											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
												<path d="M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z" stroke="#666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											</svg>
											{{event.address}}
										</view>
										<view class="event-description">{{event.description}}</view>
											<view class="event-info">
												<text v-if="event.ticket" class="info-text">门票：{{event.ticket}}</text>
												<text v-if="event.openingHours" class="info-text">开放时间：{{event.openingHours}}</text>
												<text v-if="event.transportInfo" class="info-text">交通：{{event.transportInfo}}</text>
											</view>
									</view>
								</view>
							</view>
						</view>
							
					</view>
				</view>
			</view>
		</view>
				
				<!-- 账单内容 -->
				<view v-if="mainActiveTab === 'budget'" class="budget-section">
					<view class="budget-container">
						<!-- 费用参考 -->
						<view class="cost-reference">
							<view class="reference-title">费用参考</view>
							<view class="reference-grid">
								<view class="reference-card">
									<view class="reference-header">
										<text class="reference-card-title">出行</text>
									</view>
									<view class="reference-items">
										<text class="reference-item">• 海口至三亚建议租车（约200元/天）</text>
										<text class="reference-item">• 海岛间交通可选择旅游巴士（45元/人）</text>
									</view>
								</view>
								<view class="reference-card">
									<view class="reference-header">
										<text class="reference-card-title">食宿</text>
									</view>
									<view class="reference-items">
										<text class="reference-item">• 三晚住宿：300-800元/晚</text>
										<text class="reference-item">• 景点门票：300-500元/人</text>
										<text class="reference-item">• 餐饮人均：50-150元/餐</text>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 预算设置 -->
						<view class="budget-header">
							<view class="budget-card">
								<view class="budget-title">总预算</view>
								<view class="budget-input-container">
									<text class="currency-symbol">¥</text>
									<input 
										class="budget-input" 
										v-model="budgetData.totalBudget" 
										type="number" 
										placeholder="输入总预算"
										@input="calculateRemaining"
									/>
								</view>
							</view>
							<view class="budget-summary">
								<view class="summary-item spent">
									<text class="summary-label">已花费</text>
									<text class="summary-value">¥{{budgetData.totalSpent}}</text>
								</view>
								<view class="summary-item remaining" :class="{warning: budgetData.remaining < 0}">
									<text class="summary-label">剩余</text>
									<text class="summary-value">¥{{budgetData.remaining}}</text>
								</view>
							</view>
						</view>
						
						<!-- 添加支出 -->
						<view class="expense-add">
							<view class="add-expense-card">
								<view class="add-title">添加支出</view>
								<view class="add-form">
									<view class="form-row">
										<input 
											class="expense-input name" 
											v-model="newExpense.name" 
											placeholder="支出项目"
										/>
										<view class="amount-input-container">
											<text class="currency-symbol">¥</text>
											<input 
												class="expense-input amount" 
												v-model="newExpense.amount" 
												type="number" 
												placeholder="金额"
											/>
										</view>
									</view>
									<view class="form-row">
										<picker 
											class="category-picker" 
											:value="newExpense.categoryIndex" 
											:range="expenseCategories" 
											@change="onCategoryChange"
										>
											<view class="picker-text">{{expenseCategories[newExpense.categoryIndex]}}</view>
										</picker>
										<button class="add-btn" @tap="addExpense">添加</button>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 支出列表 -->
						<view class="expense-list">
							<view class="list-title">支出明细</view>
							<view v-if="budgetData.expenses.length === 0" class="empty-state">
								<text class="empty-text">暂无支出记录</text>
							</view>
							<view v-else class="expense-items">
								<view 
									v-for="(expense, index) in budgetData.expenses" 
									:key="index" 
									class="expense-item"
								>
									<view class="expense-info">
										<view class="expense-name">{{expense.name}}</view>
										<view class="expense-category">{{expense.category}}</view>
										<view class="expense-time">{{expense.time}}</view>
									</view>
									<view class="expense-amount">¥{{expense.amount}}</view>
									<view class="expense-delete" @tap="deleteExpense(index)">删除</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地图相关
				mapHeight: 400,
				contentHeight: 400,
				mapCenter: {
					longitude: 109.8,
					latitude: 19.2
				},
				mapScale: 8,
				markers: [],
				polyline: [],
				currentMarkers: [],
				currentPolyline: [],
				
				// 拖拽相关
				isDragging: false,
				startY: 0,
				startMapHeight: 0,
				
				// Tab相关
				mainActiveTab: 'plan', // 主导航：'plan'、'budget' 或 'checkin'
				activeTab: -1,
				
				// 预算数据
				budgetData: {
					totalBudget: 0,
					totalSpent: 0,
					remaining: 0,
					expenses: []
				},
				
				// 新支出表单
				newExpense: {
					name: '',
					amount: '',
					categoryIndex: 0
				},
				
				// 支出分类
				expenseCategories: ['餐饮', '住宿', '交通', '门票', '购物', '其他'],
				
				// SVG图标
				svgIcons: {
					start: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#228B22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>'),
					middle: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#1E90FF" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>'),
					end: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C12 22 20 18 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 18 12 22 12 22Z" fill="#FFA500" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" fill="white"/></svg>')
				},
				
				guideData: {
					title: "海南三天两晚旅行攻略：海口-三亚-亚龙湾",
					weather: {
						summary: [
							{
								day: "2025-06-13",
								weather: "中雨转大雨",
								temperature: "25°C - 29°C",
								wind: "东南风3-4级",
								tips: "建议携带雨具，避免户外活动"
							},
							{
								day: "2025-06-14",
								weather: "大雨转多云",
								temperature: "25°C - 28°C",
								wind: "西南风3-4级",
								tips: "室内景点优先，注意防滑"
							},
							{
								day: "2025-06-15",
								weather: "雷阵雨转多云",
								temperature: "26°C - 34°C",
								wind: "北风1-3级",
								tips: "午后适合海滩活动"
							}
						]
					},
					routeOverview: "美兰机场→海口市区→三亚市区→亚龙湾→返程",
					timeline: [
						{
							period: "Day 1",
							events: [
								{
									time: "14:00",
									title: "抵达海口",
									address: "海口美兰机场",
									description: "从机场驱车14公里至市区（约30分钟）",
									transportInfo: "驾车14公里/30分钟",
									location: "110.329481,20.021112"
								},
								{
									time: "15:00",
									title: "骑楼老街",
									address: "海口市龙华区博爱路",
									description: "百年历史骑楼建筑群，可品尝海南粉、清补凉",
									ticket: "免费",
									openingHours: "09:00-21:00",
									location: "110.194686,20.012873"
								},
								{
									time: "18:00",
									title: "海南鸡饭",
									address: "海口琼菜王",
									description: "海南特色白切鸡配椰香饭",
									transportInfo: "距骑楼老街2公里/10分钟",
									location: "110.206759,20.008123"
								}
							]
						},
						{
							period: "Day 2",
							events: [
								{
									time: "09:00",
									title: "热带野生动植物园",
									address: "海口市琼山区",
									description: "亚洲最大热带动物园，含雨林栈道和动物表演",
									ticket: "168元",
									transportInfo: "距市区22公里/40分钟",
									openingHours: "08:30-17:30",
									location: "110.249376,19.892875"
								},
								{
									time: "12:30",
									title: "和乐蟹午餐",
									address: "三亚后海村",
									description: "海南四大名菜之一，推荐清蒸",
									transportInfo: "距动植物园120公里/2.5小时",
									location: "109.515731,18.333436"
								},
								{
									time: "15:30",
									title: "亚龙湾海滩",
									address: "三亚市亚龙湾",
									description: "绵延7公里的白沙滩，适合水上项目",
									ticket: "免费",
									transportInfo: "距后海村30公里/40分钟",
									location: "109.503816,18.252901"
								}
							]
						},
						{
							period: "Day 3",
							events: [
								{
									time: "09:00",
									title: "蜈支洲岛",
									address: "三亚市海棠湾",
									description: "5A级海岛，可体验海底漫步/摩托艇",
									ticket: "144元（船票+门票）",
									transportInfo: "距亚龙湾35公里/50分钟",
									openingHours: "08:00-17:00",
									location: "110.008434,18.662293"
								},
								{
									time: "18:00",
									title: "免税城购物",
									address: "三亚国际免税城",
									description: "亚洲最大单体免税店，含DFS环球港",
									transportInfo: "距蜈支洲岛25公里/40分钟",
									location: "109.536507,18.257863"
								}
							]
						}
					],
					dining: {
						specialties: {
							title: "海南必吃美食",
							items: [
								"海南鸡饭（白切鸡配椰香饭）",
								"和乐蟹（膏满肉肥）",
								"清补凉（热带水果甜汤）",
								"海南粉（酸辣米线）",
								"椰子鸡（椰奶炖鸡）"
							]
						}
					},
					tips: [
							{
								icon: "car",
								color: "#FFA500",
								title: "交通建议",
								items: [
									"海口至三亚建议租车（约200元/天）",
									"海岛间交通可选择旅游巴士（45元/人）"
								]
							},
							{
								icon: "moneybag",
								color: "#228B22",
								title: "费用参考",
								items: [
									"三晚住宿：300-800元/晚",
									"景点门票：300-500元/人",
									"餐饮人均：50-150元/餐"
								]
							}
						]
				}
			}
		},
		onLoad() {
			this.initMap();
			this.initLayout();
		},
		methods: {
			// 初始化地图
			initMap() {
				// 为每一天创建标记点和路线
				this.createAllMapData();
				this.updateMapForActiveTab();
			},
			
			// 创建所有地图数据
			createAllMapData() {
				// 创建每一天的标记点和路线
				this.markers = [];
				this.polyline = [];
				
				// 处理每一天的数据
				this.guideData.timeline.forEach((day, dayIndex) => {
					const dayMarkers = [];
					const points = [];
					
					// 处理每个事件点
					day.events.forEach((event, eventIndex) => {
						// 解析位置
						const [longitude, latitude] = event.location.split(',').map(coord => parseFloat(coord));
						
						// 创建标记
						const marker = {
							id: dayIndex * 100 + eventIndex + 1,
							longitude,
							latitude,
							title: event.title,
							iconPath: eventIndex === 0 ? this.svgIcons.start : 
									 eventIndex === day.events.length - 1 ? this.svgIcons.end : 
									 this.svgIcons.middle,
							width: 30,
							height: 30,
							callout: {
							content: event.title,
							color: "#ffffff",
							fontSize: 12,
							borderRadius: 8,
							bgColor: dayIndex === 0 ? "#40E0D0" : dayIndex === 1 ? "#20c997" : "#48CAE4",
							padding: 8,
							display: "ALWAYS"
						}
						};
						
						dayMarkers.push(marker);
						points.push({longitude, latitude});
					});
					
					// 添加到总数组
					this.markers.push(dayMarkers);
					
					// 创建路线
					if (points.length > 1) {
						const dayPolyline = {
							points: points,
							color: dayIndex === 0 ? "#228B22" : dayIndex === 1 ? "#1E90FF" : "#FFA500",
							width: 4,
							dottedLine: false,
							arrowLine: true
						};
						this.polyline.push(dayPolyline);
					}
				});
			},
			
			// 更新地图显示当前标签页的路线
			updateMapForActiveTab() {
				if (this.activeTab === -1) {
					// 总览模式：显示所有标记点和路线
					this.currentMarkers = this.markers.flat();
					this.currentPolyline = this.polyline;
				} else {
					// 单日模式：显示当前标签页的路线
					this.currentMarkers = this.markers[this.activeTab] || [];
					this.currentPolyline = [this.polyline[this.activeTab]].filter(Boolean);
				}
				
				// 调整地图中心和缩放级别
				this.adjustMapView();
			},
			
			// 调整地图视图以适应当前路线
			adjustMapView() {
				if (!this.currentMarkers.length) return;
				
				// 如果只有一个点，直接居中
				if (this.currentMarkers.length === 1) {
					const marker = this.currentMarkers[0];
					this.mapCenter = {
						longitude: marker.longitude,
						latitude: marker.latitude
					};
					this.mapScale = 14;
					return;
				}
				
				// 计算边界
				let minLat = 90, maxLat = -90, minLng = 180, maxLng = -180;
				this.currentMarkers.forEach(marker => {
					minLat = Math.min(minLat, marker.latitude);
					maxLat = Math.max(maxLat, marker.latitude);
					minLng = Math.min(minLng, marker.longitude);
					maxLng = Math.max(maxLng, marker.longitude);
				});
				
				// 计算中心点
				const centerLat = (minLat + maxLat) / 2;
				const centerLng = (minLng + maxLng) / 2;
				
				// 设置地图中心
				this.mapCenter = {
					longitude: centerLng,
					latitude: centerLat
				};
				
				// 根据点的分布设置缩放级别
				const latDiff = maxLat - minLat;
				const lngDiff = maxLng - minLng;
				const maxDiff = Math.max(latDiff, lngDiff);
				
				// 根据距离调整缩放级别
				if (maxDiff > 1) this.mapScale = 7;
				else if (maxDiff > 0.5) this.mapScale = 9;
				else if (maxDiff > 0.1) this.mapScale = 11;
				else if (maxDiff > 0.05) this.mapScale = 12;
				else if (maxDiff > 0.01) this.mapScale = 13;
				else this.mapScale = 14;
			},
			
			// 初始化布局
			initLayout() {
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.windowHeight;
				this.mapHeight = Math.floor(screenHeight * 0.4);
				this.contentHeight = screenHeight - this.mapHeight - 60;
			},
			
			onMarkerTap(e) {
				const markerId = e.detail.markerId;
				const marker = this.currentMarkers.find(m => m.id === markerId);
				if (marker) {
					uni.showToast({
						title: marker.title,
						icon: 'none'
					});
				}
			},
			
			// 聚焦到特定位置
			focusOnLocation(locationStr) {
				if (!locationStr) return;
				
				const [longitude, latitude] = locationStr.split(',').map(coord => parseFloat(coord));
				this.mapCenter = { longitude, latitude };
				this.mapScale = 14;
				
				// 滚动到地图区域
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			
			// 拖拽处理
			handleTouchStart(e) {
				this.isDragging = true;
				this.startY = e.touches[0].clientY;
				this.startMapHeight = this.mapHeight;
			},
			handleTouchMove(e) {
				if (!this.isDragging) return;
				
				const deltaY = e.touches[0].clientY - this.startY;
				const newMapHeight = this.startMapHeight + deltaY;
				
				// 限制地图高度范围
				const minHeight = 150;
				const maxHeight = uni.getSystemInfoSync().windowHeight - 200;
				
				if (newMapHeight >= minHeight && newMapHeight <= maxHeight) {
					this.mapHeight = newMapHeight;
					this.contentHeight = uni.getSystemInfoSync().windowHeight - this.mapHeight - 60;
				}
			},
			handleTouchEnd() {
				this.isDragging = false;
				
				// 根据当前高度自动吸附到预设位置
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.windowHeight;
				
				// 如果拖动到接近全屏
				if (this.mapHeight > screenHeight * 0.7) {
					this.mapHeight = Math.floor(screenHeight * 0.8);
					this.contentHeight = screenHeight - this.mapHeight - 60;
				} 
				// 如果拖动到接近隐藏
				else if (this.mapHeight < screenHeight * 0.25) {
					this.mapHeight = 150;
					this.contentHeight = screenHeight - this.mapHeight - 60;
				}
				// 默认位置
				else if (Math.abs(this.mapHeight - screenHeight * 0.4) < 50) {
					this.mapHeight = Math.floor(screenHeight * 0.4);
					this.contentHeight = screenHeight - this.mapHeight - 60;
				}
			},
			
			// 主导航切换
			switchMainTab(tab) {
				this.mainActiveTab = tab;
			},
			
			// Tab切换
			switchTab(index) {
				this.activeTab = index;
				this.updateMapForActiveTab();
			},
			
			// 计算剩余预算
			calculateRemaining() {
				const total = parseFloat(this.budgetData.totalBudget) || 0;
				this.budgetData.totalSpent = this.budgetData.expenses.reduce((sum, expense) => {
					return sum + (parseFloat(expense.amount) || 0);
				}, 0);
				this.budgetData.remaining = total - this.budgetData.totalSpent;
			},
			
			// 分类选择变化
			onCategoryChange(e) {
				this.newExpense.categoryIndex = e.detail.value;
			},
			
			// 添加支出
			addExpense() {
				if (!this.newExpense.name.trim()) {
					uni.showToast({
						title: '请输入支出项目',
						icon: 'none'
					});
					return;
				}
				
				if (!this.newExpense.amount || parseFloat(this.newExpense.amount) <= 0) {
					uni.showToast({
						title: '请输入有效金额',
						icon: 'none'
					});
					return;
				}
				
				// 创建支出记录
				const expense = {
					name: this.newExpense.name.trim(),
					amount: parseFloat(this.newExpense.amount),
					category: this.expenseCategories[this.newExpense.categoryIndex],
					time: this.formatCurrentTime()
				};
				
				// 添加到列表
				this.budgetData.expenses.unshift(expense);
				
				// 重新计算预算
				this.calculateRemaining();
				
				// 清空表单
				this.newExpense.name = '';
				this.newExpense.amount = '';
				this.newExpense.categoryIndex = 0;
				
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			},
			
			// 删除支出
			deleteExpense(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条支出记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.budgetData.expenses.splice(index, 1);
							this.calculateRemaining();
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 格式化当前时间
			formatCurrentTime() {
				const now = new Date();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				return `${month}-${day} ${hours}:${minutes}`;
			},
			
			// 工具方法
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${month}月${day}日`;
			},
			getIcon(iconName) {
				const icons = {
					umbrella: '☂️',
					car: '🚗',
					moneybag: '💰'
				};
				return icons[iconName] || '📌';
			},
			getSvgIcon(iconName) {
				if (iconName === 'umbrella') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#1E90FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>`;
				} else if (iconName === 'car') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M5 11L19 11" stroke="#FFA500" stroke-width="2" stroke-linecap="round"/>
								<path d="M8 15L6 19H18L16 15" stroke="#FFA500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								<rect x="3" y="5" width="18" height="10" rx="2" stroke="#FFA500" stroke-width="2"/>
								<circle cx="7" cy="15" r="1" fill="#FFA500"/>
								<circle cx="17" cy="15" r="1" fill="#FFA500"/>
							</svg>`;
				} else if (iconName === 'moneybag') {
					return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M2 10V8C2 7.46957 2.21071 6.96086 2.58579 6.58579C2.96086 6.21071 3.46957 6 4 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V10C21.4696 10 20.9609 10.2107 20.5858 10.5858C20.2107 10.9609 20 11.4696 20 12C20 12.5304 20.2107 13.0391 20.5858 13.4142C20.9609 13.7893 21.4696 14 22 14V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V14C2.53043 14 3.03914 13.7893 3.41421 13.4142C3.78929 13.0391 4 12.5304 4 12C4 11.4696 3.78929 10.9609 3.41421 10.5858C3.03914 10.2107 2.53043 10 2 10Z" stroke="#228B22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>`;
				}
				return '📌'; // Default icon
			},
			getWeatherIcon(weather) {
				if (weather.includes('雨')) return '🌧️';
				if (weather.includes('多云')) return '⛅';
				if (weather.includes('雷')) return '⛈️';
				return '🌤️';
			}
		}
	}
</script>

<style>
	/* 全局容器 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: linear-gradient(135deg, #E0FFFF 0%, #AFEEEE 30%, #40E0D0 70%, #48CAE4 100%);
		overflow: hidden;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	}
	
	/* 顶部标题栏 */
	.header {
		padding: 25rpx 30rpx 0;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		color: white;
		box-shadow: 0 6rpx 24rpx rgba(64, 224, 208, 0.3);
		z-index: 100;
		position: relative;
		overflow: hidden;
	}
	
	.header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
		backdrop-filter: blur(8rpx);
	}
	
	.header-decoration {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 1;
	}
	
	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
		animation: ripple 4s ease-in-out infinite;
	}
	
	.circle-1 {
		width: 120rpx;
		height: 120rpx;
		top: -60rpx;
		right: 50rpx;
		animation-delay: 0s;
	}
	
	.circle-2 {
		width: 80rpx;
		height: 80rpx;
		top: 20rpx;
		left: 20rpx;
		animation-delay: 2s;
	}
	
	.circle-3 {
		width: 60rpx;
		height: 60rpx;
		bottom: 20rpx;
		right: 20rpx;
		animation-delay: 4s;
	}
	
	@keyframes ripple {
		0%, 100% {
			transform: scale(1);
			opacity: 0.6;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.2;
		}
	}
	
	.header-content {
		position: relative;
		z-index: 2;
		padding-bottom: 20rpx;
	}
	
	.title-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
		gap: 15rpx;
	}
	
	.title-icon {
		font-size: 40rpx;
		animation: bounce 2s ease-in-out infinite;
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-10rpx);
		}
		60% {
			transform: translateY(-5rpx);
		}
	}
	
	.route-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}
	
	.route-icon {
		font-size: 32rpx;
		animation: fly 3s ease-in-out infinite;
		margin-right: 8rpx;
	}
	
	@keyframes fly {
		0%, 100% {
			transform: translateX(0);
		}
		50% {
			transform: translateX(10rpx);
		}
	}
	
	.header-wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40rpx;
		z-index: 3;
		animation: wave 3s ease-in-out infinite;
	}
	
	.header-wave svg {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	@keyframes wave {
		0%, 100% {
			transform: translateX(0);
		}
		50% {
			transform: translateX(-20rpx);
		}
	}
	
	.main-title {
		font-size: 28rpx;
		font-weight: bold;
		text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.15);
		letter-spacing: 1rpx;
		line-height: 1.3;
	}
	
	.route-overview {
		font-size: 22rpx;
		opacity: 0.9;
		text-shadow: 0 1rpx 3rpx rgba(0,0,0,0.15);
		letter-spacing: 0.5rpx;
		line-height: 1.4;
	}
	
	/* 地图区域 */
	.map-section {
		position: relative;
		background: #f0f8ff;
		border-bottom: 1rpx solid #e0e0e0;
		transition: height 0.3s ease;
	}
	
	.map {
		width: 100%;
		height: 100%;
	}
	
	/* 拖拽分隔条 */
	.drag-handle {
		height: 50rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
	}
	
	.drag-handle:active {
		background: #f0f8ff;
	}
	
	.drag-indicator {
		width: 100rpx;
		height: 8rpx;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		border-radius: 10rpx;
		opacity: 0.8;
		box-shadow: 0 2rpx 8rpx rgba(64, 224, 208, 0.4);
		transition: all 0.3s ease;
	}
	
	.drag-handle:active .drag-indicator {
		opacity: 1;
		transform: scaleY(1.5);
		box-shadow: 0 4rpx 16rpx rgba(64, 224, 208, 0.6);
	}
	
	/* 内容区域 */
	.content-section {
		background: transparent;
		overflow: hidden;
		transition: height 0.3s ease;
	}
	
	/* 天气Swiper */
	.weather-section {
		padding: 20rpx;
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		padding-left: 15rpx;
		border-left: 6rpx solid;
		border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
		display: flex;
		align-items: center;
		gap: 10rpx;
		position: relative;
	}
	
	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 3rpx;
	}
	
	.weather-swiper {
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: linear-gradient(135deg, rgba(64,224,208,0.15) 0%, rgba(72,202,228,0.1) 100%);
		box-shadow: 0 8rpx 32rpx rgba(64,224,208,0.2);
	}
	
	/* 天气提示部分 */
	.weather-tips-section {
		margin-top: 20rpx;
	}
	
	.weather-tip-card {
		background: linear-gradient(135deg, rgba(64,224,208,0.18) 0%, rgba(72,202,228,0.12) 100%);
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 6rpx 24rpx rgba(64,224,208,0.15);
		border: 1rpx solid rgba(64,224,208,0.4);
		backdrop-filter: blur(15rpx);
		transition: all 0.3s ease;
	}
	
	.weather-tip-card:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 32rpx rgba(64,224,208,0.25);
	}
	
	.weather-tip-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
		gap: 12rpx;
	}
	
	.weather-tip-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.weather-tip-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #2E8B8B;
		flex: 1;
	}
	
	.weather-tip-content {
		font-size: 26rpx;
		color: #2E8B8B;
		line-height: 1.5;
		opacity: 0.9;
	}
	
	/* 总览容器样式 */
	.overview-container {
		padding: 20rpx;
	}
	

	
	.route-overview-card {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15), rgba(173, 255, 173, 0.15));
		border-radius: 20rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(64, 224, 208, 0.2);
		border: 1rpx solid rgba(64, 224, 208, 0.3);
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.route-path {
		font-size: 28rpx;
		color: #2E8B8B;
		padding: 15rpx 0;
		border-bottom: 1rpx dashed rgba(64, 224, 208, 0.5);
		margin-bottom: 20rpx;
		text-align: center;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(255,255,255,0.8);
		animation: pulse 2s ease-in-out infinite;
		position: relative;
		z-index: 2;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 10rpx;
	}
	
	@keyframes pulse {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.8;
		}
	}
	
	.route-days {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		position: relative;
		z-index: 2;
	}
	
	.route-day {
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		border-left: 4rpx solid #40E0D0;
		transition: all 0.3s ease;
	}
	
	.route-day:hover {
		background: rgba(64, 224, 208, 0.1);
		transform: translateX(5rpx);
	}
	
	.day-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #2E8B8B;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 4rpx rgba(255,255,255,0.8);
		display: flex;
		align-items: center;
	}
	
	.day-title:before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: #2E8B8B;
		margin-right: 10rpx;
		box-shadow: 0 0 5rpx #2E8B8B;
	}
	
	.day-spots {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10rpx;
		padding-left: 20rpx;
		margin-top: 5rpx;
	}
	
	.day-spots text {
		font-size: 26rpx;
		color: #2E8B8B;
		padding: 8rpx 15rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 30rpx;
		border: 1rpx solid rgba(64, 224, 208, 0.5);
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 5rpx rgba(64, 224, 208, 0.2);
		font-weight: 500;
	}
	
	.day-spots text:hover {
		background: rgba(64, 224, 208, 0.2);
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 8rpx rgba(64, 224, 208, 0.2);
	}
	
	.arrow-container {
		width: 50rpx;
		height: 30rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 5rpx;
	}
	
	.wave-arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 3rpx solid #40E0D0;
		border-right: 3rpx solid #40E0D0;
		transform: rotate(45deg);
		position: relative;
		animation: waveArrow 2s ease-in-out infinite;
	}
	
	.wave-arrow:before {
		content: '';
		position: absolute;
		top: -10rpx;
		left: -30rpx;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, transparent, rgba(64, 224, 208, 0.5), transparent);
		animation: waveFlow 2s linear infinite;
	}
	
	.wave-arrow:after {
		content: '';
		position: absolute;
		top: 0;
		left: -20rpx;
		width: 40rpx;
		height: 6rpx;
		background: linear-gradient(90deg, transparent, rgba(64, 224, 208, 0.3), transparent);
		animation: waveFlow 1.5s linear infinite;
		animation-delay: -0.5s;
	}
	
	@keyframes waveArrow {
		0%, 100% {
			transform: rotate(45deg) translateX(0);
		}
		50% {
			transform: rotate(45deg) translateX(5rpx);
		}
	}
	
	@keyframes waveFlow {
		0% {
			transform: translateX(-30rpx) scaleY(0.5);
		}
		50% {
			transform: translateX(0) scaleY(1);
		}
		100% {
			transform: translateX(30rpx) scaleY(0.5);
		}
	}
	
	/* 海浪动画 */
	.ocean-wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60rpx;
		overflow: hidden;
		opacity: 0.6;
	}
	
	.wave {
		position: absolute;
		bottom: -10rpx;
		width: 200%;
		height: 60rpx;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2340E0D0" fill-opacity="0.5" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
		background-repeat: repeat-x;
		background-position: 0 bottom;
		background-size: 50% 100%;
		transform: translate3d(0, 0, 0);
	}
	
	.wave1 {
		animation: wave 12s linear infinite;
		z-index: 1;
		opacity: 0.7;
	}
	
	.wave2 {
		animation: wave 8s linear infinite;
		z-index: 0;
		opacity: 0.5;
		animation-delay: -4s;
	}
	
	@keyframes wave {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}
	
	.weather-card {
		height: 100%;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		color: white;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		border-radius: 12rpx;
	}
	
	.weather-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
		backdrop-filter: blur(5rpx);
	}
	
	.weather-card .weather-header,
	.weather-card .weather-info,
	.weather-card .weather-temp,
	.weather-card .weather-wind,
	.weather-card .weather-tips {
		position: relative;
		z-index: 1;
	}
	
	.weather-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		padding-top: 20rpx;
	}
	
	.weather-date {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.weather-icon {
		font-size: 45rpx;
	}
	
	.weather-info {
		font-size: 24rpx;
		margin-bottom: 5rpx;
	}
	
	.weather-temp {
		font-size: 24rpx;
		margin-bottom: 5rpx;
		font-weight: bold;
	}
	
	.weather-wind {
		font-size: 22rpx;
		margin-bottom: 10rpx;
		opacity: 0.8;
	}
	
	.weather-tips {
		font-size: 22rpx;
		background: rgba(255, 255, 255, 0.2);
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
	
	/* 主导航标签页 */
	.main-tab-section {
		padding: 20rpx;
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.main-tab-header {
		display: flex;
		background: rgba(64, 224, 208, 0.1);
		border-radius: 15rpx;
		padding: 8rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
	}
	
	.main-tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 15rpx;
		border-radius: 12rpx;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		z-index: 2;
		cursor: pointer;
	}
	
	.main-tab-item.active {
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		box-shadow: 0 6rpx 20rpx rgba(64, 224, 208, 0.4);
		transform: translateY(-2rpx);
	}
	
	.main-tab-text {
		font-size: 28rpx;
		font-weight: 600;
		color: #666;
		transition: all 0.3s ease;
		letter-spacing: 1rpx;
	}
	
	.main-tab-item.active .main-tab-text {
		color: #ffffff;
		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
	}
	
	.plan-section {
		margin-top: 0;
	}
	
	/* Tab标签页 */
	.tab-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.tab-header {
		display: flex;
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		border-bottom: 1rpx solid rgba(64, 224, 208, 0.3);
		backdrop-filter: blur(5rpx);
	}
	
	.tab-item {
		flex: 1;
		padding: 25rpx 10rpx;
		text-align: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		border-bottom: 4rpx solid transparent;
	}
	
	.tab-item.active {
		color: #40E0D0;
		border-bottom-color: #40E0D0;
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
	}
	
	.tab-item:hover {
		background: rgba(64, 224, 208, 0.08);
		transform: translateY(-2rpx);
	}
	
	.tab-text {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.tab-content {
		flex: 1;
		background: white;
		border-radius: 0 0 12rpx 12rpx;
		overflow: hidden;
	}
	
	.timeline-container {
		padding: 25rpx;
	}
	
	/* 事件流 */
	.event-flow {
		margin-bottom: 35rpx;
		position: relative;
	}
	
	.event-flow::before {
		content: '';
		position: absolute;
		top: 12rpx;
		left: 25rpx;
		width: 3rpx;
		height: calc(100% - 24rpx);
		background: rgba(30, 144, 255, 0.2);
		z-index: 1;
	}
	
	.event-item {
		display: flex;
		margin-bottom: 35rpx;
		position: relative;
		z-index: 2;
	}
	
	.event-timeline {
		width: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 25rpx;
		position: relative;
	}
	
	.timeline-dot {
		width: 24rpx;
		height: 24rpx;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		border-radius: 50%;
		border: 4rpx solid white;
		box-shadow: 0 0 0 3rpx rgba(64, 224, 208, 0.4), 0 4rpx 12rpx rgba(64, 224, 208, 0.3);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}
	
	.timeline-dot:hover {
		transform: scale(1.2);
		box-shadow: 0 0 0 3rpx rgba(64, 224, 208, 0.6), 0 6rpx 20rpx rgba(64, 224, 208, 0.4);
	}
	
	.timeline-dot-inner {
		width: 12rpx;
		height: 12rpx;
		background: white;
		border-radius: 50%;
	}
	
	.timeline-line {
		width: 3rpx;
		height: 100%;
		position: absolute;
		top: 24rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(30, 144, 255, 0.3);
		z-index: 1;
	}
	
	.event-content {
		flex: 1;
		position: relative;
	}
	
	.event-time {
		font-size: 26rpx;
		color: #40E0D0;
		font-weight: bold;
		margin-bottom: 12rpx;
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid rgba(64, 224, 208, 0.3);
		backdrop-filter: blur(5rpx);
	}
	
	.time-icon {
		margin-right: 8rpx;
		display: flex;
		align-items: center;
	}
	
	.event-card {
		background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%);
		border-radius: 16rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(64, 224, 208, 0.2);
		border-left: 5rpx solid #40E0D0;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.3);
	}
	
	.event-card:active {
		transform: scale(0.98) translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
	}
	
	.event-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 48rpx rgba(64, 224, 208, 0.25);
	}
	
	.event-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.event-address {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.event-description {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		line-height: 1.6;
	}
	
	.event-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		margin-top: 10rpx;
	}
	
	.info-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		padding: 6rpx 0;
		border-left: 3rpx solid #40E0D0;
		padding-left: 12rpx;
		margin-left: 8rpx;
		background: linear-gradient(90deg, rgba(64, 224, 208, 0.08) 0%, transparent 100%);
		border-radius: 0 6rpx 6rpx 0;
		transition: all 0.3s ease;
	}
	
	.info-text:hover {
		background: linear-gradient(90deg, rgba(64, 224, 208, 0.12) 0%, transparent 100%);
		border-left-color: #48CAE4;
	}
	
	/* 美食推荐 */
	.dining-section {
		margin-bottom: 35rpx;
		background: linear-gradient(135deg, rgba(64,224,208,0.15) 0%, rgba(72,202,228,0.1) 100%);
		border-radius: 16rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(64, 224, 208, 0.2);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(64,224,208,0.3);
	}
	
	.food-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-top: 15rpx;
	}
	
	.food-item {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
		border-radius: 16rpx;
		padding: 25rpx 15rpx;
		border: 1rpx solid rgba(64, 224, 208, 0.3);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		box-shadow: 0 4rpx 20rpx rgba(64, 224, 208, 0.15);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		backdrop-filter: blur(5rpx);
	}
	
	.food-item:active {
		transform: scale(0.95) translateY(2rpx);
	}
	
	.food-item:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 32rpx rgba(64, 224, 208, 0.25);
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.2) 0%, rgba(72, 202, 228, 0.15) 100%);
	}
	
	.food-icon {
		font-size: 50rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #40E0D0;
	}
	
	.food-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}
	
	/* 实用提示 */
	.tips-section {
		margin-bottom: 35rpx;
		background: linear-gradient(135deg, rgba(64,224,208,0.15) 0%, rgba(72,202,228,0.1) 100%);
		border-radius: 16rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(64, 224, 208, 0.2);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(64,224,208,0.3);
	}
	
	.tips-grid {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 15rpx;
	}
	
	.tip-card {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.12) 0%, rgba(72, 202, 228, 0.08) 100%);
		border-radius: 16rpx;
		padding: 25rpx;
		border: 1rpx solid rgba(64, 224, 208, 0.3);
		box-shadow: 0 4rpx 20rpx rgba(64, 224, 208, 0.15);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		backdrop-filter: blur(5rpx);
	}
	
	.tip-card:active {
		transform: scale(0.98) translateY(2rpx);
	}
	
	.tip-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 32rpx rgba(64, 224, 208, 0.25);
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.18) 0%, rgba(72, 202, 228, 0.12) 100%);
	}
	
	.tip-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.tip-icon {
		font-size: 36rpx;
		margin-right: 15rpx;
		color: #40E0D0;
		display: flex;
		align-items: center;
	}
	
	.tip-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.tip-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15rpx;
	}
	
	.tip-items {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}
	
	.tip-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		padding-left: 20rpx;
		position: relative;
	}
	
	.tip-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 8rpx;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		border-radius: 50%;
		box-shadow: 0 0 0 2rpx rgba(64, 224, 208, 0.3);
	}
	
	/* SVG样式 */
	svg {
		vertical-align: middle;
	}
	
	/* 账单页面样式 */
	.budget-section {
		padding: 20rpx;
	}
	
	.budget-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.budget-header {
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.budget-card {
		margin-bottom: 20rpx;
	}
	
	.budget-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.budget-input-container {
		display: flex;
		align-items: center;
		background: rgba(64, 224, 208, 0.1);
		border-radius: 12rpx;
		padding: 15rpx 20rpx;
		border: 2rpx solid rgba(64, 224, 208, 0.3);
		transition: all 0.3s ease;
	}
	
	.budget-input-container:focus-within {
		border-color: #40E0D0;
		box-shadow: 0 0 0 4rpx rgba(64, 224, 208, 0.2);
	}
	
	.currency-symbol {
		font-size: 28rpx;
		font-weight: bold;
		color: #40E0D0;
		margin-right: 10rpx;
	}
	
	.budget-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		background: transparent;
		border: none;
		outline: none;
	}
	
	.budget-summary {
		display: flex;
		gap: 15rpx;
	}
	
	.summary-item {
		flex: 1;
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.15) 0%, rgba(72, 202, 228, 0.1) 100%);
		border-radius: 12rpx;
		padding: 20rpx;
		text-align: center;
		border: 1rpx solid rgba(64, 224, 208, 0.3);
		transition: all 0.3s ease;
	}
	
	.summary-item.warning {
		background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 99, 132, 0.1) 100%);
		border-color: rgba(255, 107, 107, 0.3);
	}
	
	.summary-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}
	
	.summary-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.summary-item.warning .summary-value {
		color: #ff6b6b;
	}
	
	.expense-add {
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.add-expense-card {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.add-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.add-form {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.form-row {
		display: flex;
		gap: 15rpx;
		align-items: center;
	}
	
	.expense-input {
		flex: 1;
		padding: 15rpx 20rpx;
		border: 2rpx solid rgba(64, 224, 208, 0.3);
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
		background: rgba(64, 224, 208, 0.05);
		transition: all 0.3s ease;
	}
	
	.expense-input:focus {
		border-color: #40E0D0;
		box-shadow: 0 0 0 4rpx rgba(64, 224, 208, 0.2);
		background: rgba(64, 224, 208, 0.1);
	}
	
	.expense-input.name {
		flex: 2;
	}
	
	.amount-input-container {
		flex: 1;
		display: flex;
		align-items: center;
		background: rgba(64, 224, 208, 0.05);
		border-radius: 12rpx;
		padding: 15rpx 20rpx;
		border: 2rpx solid rgba(64, 224, 208, 0.3);
		transition: all 0.3s ease;
	}
	
	.amount-input-container:focus-within {
		border-color: #40E0D0;
		box-shadow: 0 0 0 4rpx rgba(64, 224, 208, 0.2);
		background: rgba(64, 224, 208, 0.1);
	}
	
	.expense-input.amount {
		border: none;
		background: transparent;
		padding: 0;
		margin-left: 10rpx;
	}
	
	.expense-input.amount:focus {
		box-shadow: none;
	}
	
	.category-picker {
		flex: 1;
		padding: 15rpx 20rpx;
		border: 2rpx solid rgba(64, 224, 208, 0.3);
		border-radius: 12rpx;
		background: rgba(64, 224, 208, 0.05);
		transition: all 0.3s ease;
	}
	
	.picker-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.add-btn {
		padding: 15rpx 30rpx;
		background: linear-gradient(135deg, #40E0D0 0%, #48CAE4 100%);
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 16rpx rgba(64, 224, 208, 0.4);
		transition: all 0.3s ease;
	}
	
	.add-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(64, 224, 208, 0.4);
	}
	
	.expense-list {
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 60rpx 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.expense-items {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.expense-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.08) 0%, rgba(72, 202, 228, 0.05) 100%);
		border-radius: 12rpx;
		border: 1rpx solid rgba(64, 224, 208, 0.2);
		transition: all 0.3s ease;
	}
	
	.expense-item:hover {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.12) 0%, rgba(72, 202, 228, 0.08) 100%);
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 16rpx rgba(64, 224, 208, 0.2);
	}
	
	.expense-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 5rpx;
	}
	
	.expense-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.expense-category {
		font-size: 24rpx;
		color: #666;
	}
	
	.expense-time {
		font-size: 22rpx;
		color: #999;
	}
	
	.expense-amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #40E0D0;
		margin-right: 15rpx;
	}
	
	.expense-delete {
		font-size: 32rpx;
		padding: 10rpx;
		color: #ff6b6b;
		transition: all 0.3s ease;
		border-radius: 8rpx;
	}
	
	.expense-delete:active {
		background: rgba(255, 107, 107, 0.1);
		transform: scale(0.9);
	}
	
	/* 费用参考样式 */
	.cost-reference {
		margin-top: 30rpx;
		background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255,255,255,0.2);
	}
	
	.reference-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.reference-grid {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.reference-card {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.08) 0%, rgba(72, 202, 228, 0.05) 100%);
		border-radius: 15rpx;
		padding: 25rpx;
		border: 1rpx solid rgba(64, 224, 208, 0.2);
		transition: all 0.3s ease;
	}
	
	.reference-card:hover {
		background: linear-gradient(135deg, rgba(64, 224, 208, 0.12) 0%, rgba(72, 202, 228, 0.08) 100%);
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 16rpx rgba(64, 224, 208, 0.2);
	}
	
	.reference-header {
		display: flex;
		align-items: center;
		gap: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.reference-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.reference-card-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.reference-items {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.reference-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	/* 打卡部分样式 */
	.checkin-section {
		padding: 20rpx;
	}
	
	.checkin-container {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
	
	/* 响应式优化 */
	@media (max-width: 750rpx) {
		.food-grid {
			grid-template-columns: 1fr;
		}
		
		.main-title {
			font-size: 32rpx;
		}
		
		.event-card {
			padding: 20rpx;
		}
		
		.form-row {
			flex-direction: column;
			align-items: stretch;
		}
		
		.summary-item {
			min-width: 0;
		}
	}
</style>